<template>


    <div id="app">
        
        <el-container>
  <el-header  height="70px">
      <h1>电商后台管理系统</h1>
       <el-button type="info" @click="logout"  class="logout">退出</el-button>
  </el-header>
  <el-container >
    <el-aside  width="200px">
      <div class="logy_nav" @click="logy_nav">|||</div>
    <el-menu
    router
  background-color="#333744"
  text-color="#fff"
  :collapse="flag"
  >
  <el-submenu :index="item.id+''" v-for="item in list" :key="item.id">
    <template slot="title">
      <i class="el-icon-location"></i>
      <span>{{item.authName}}</span>
    </template>
    <el-menu-item :index="subItem.path" v-for="subItem in item.children" :key="subItem.id">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>{{subItem.authName}}</span>
      </template>
    </el-menu-item>
  </el-submenu>
</el-menu>

    </el-aside>
    <el-main>
     <router-view></router-view>
    </el-main>
  </el-container>
</el-container>
    </div>
</template>
<script>
export default {
  data() {
    return {
        list:null,
        flag:false,
        iconsObj: {
        '125':'iconfont icon-user',
        '103':'iconfont icon-tijikongjian',
        '101':'iconfont icon-shangpin',
        '102':'iconfont icon-danju',
        '145':'iconfont icon-baobiao'
      }

    };
    
  },
  created() {
    this.getMenuList();
  },
  
  methods: {
    logy_nav(){
      this.flag=!this.flag
    },
    logout() {
      window.sessionStorage.clear();
      this.$router.push("/login");
    },
    getMenuList() {
     this.$axios.get('menus').then(res=>{
        //  console.log(res);
             this.list=res.data.data 
        
     })
  
    }

  }
};
</script>


<style >
.el-aside-vertical-demo:not(.el-aside--collapse) {
    width: 200px;
    min-height: 400px;
  }
.el-header,
.el-footer {
  background-color:#373d41;
  color: #fff;
  display: flex;
  align-items: center;
}

.el-aside {
  background-color: #333744;
  color: #333;
  height: 100vh;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
}
.logout{
    position: absolute;
    right:50px;
}
.logy_nav{
  width: 200px;
  height: 25px;
  font-size: 20px;
  text-align: center; 
  background-color: #4a5064;
  color: #fff;
}
</style>